import React from 'react';
import ThemeContext from './theme-context';
import ThemedBar from './components/ThemedBar';

const themes = {
  light: {
    classnames: 'btn btn-primary',
    bgcolor: '#eeeeee',
    color: '#000'
  },
  dark: {
    classnames: 'btn btn-light',
    bgcolor: '#222222',
    color: '#fff'
  }
};

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      theme: 'light'
    };
    this.addComment = this.addComment.bind(this);
    this.changeTheme = this.changeTheme.bind(this);
  }

  addComment(comment) {
    this.setState({
      comments: [...this.state.comments, comment]
    });
  }
  changeTheme(theme) {
    this.setState({
      theme
    });
  }
  render() {
    return (
      <ThemeContext.Provider value={themes[this.state.theme]}>
        <div className="container">
          <div className="text-center mb-5">
            <a
              href="#theme-switcher"
              className="btn btn-light"
              onClick={() => {this.changeTheme('light');}}
            >
              浅色主题
            </a>
            <a href="#theme-switcher" className="btn btn-secondary" onClick={() => {this.changeTheme('dark');}}>
              深色主题
            </a>
          </div>
          <ThemedBar />
        </div>
      </ThemeContext.Provider>
    );
  }
}

export default App;
